<template>
  <div>
    <van-search class="top" v-model="value" shape="round" background="#4fc08d" @click="$router.push('/search')"
      placeholder="请输入搜索关键词" />
    <van-tabs class="bom" border lazy-render @rendered="getuid" color="#07c160" @click="getuid">
      <van-tab v-for="(item, index) in list" :title="item.name" :key="index">

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="spa">
              <span class="ka" v-for="(item, index) in artile_list" :key="index"
                @click="$router.push({ path: '/home-list', query: { id: item._id, user_id: item.author_id } })">
                <p>{{ item.title }}</p>
                <!-- 一张图 -->
                <div class="img">
                  <van-image class="img02" v-for="(iteml, indexl) in item.imageSrc" :key="indexl" :src="iteml">
                    <template v-slot:error>加载失败</template>
                  </van-image>
                </div>
                <div class="times">
                  <p class="name">{{ item.author }}</p>
                  <p class="pinglun">{{ item.comment }}评论</p>
                  <p class="time">{{ item.time | moment }}</p>
                </div>
              </span>
            </div>
          </van-pull-refresh>

        </van-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { Search } from "vant";
import { Tab, Tabs } from "vant";
import { PullRefresh } from "vant";
import { List } from 'vant';
export default {
  name: "App03HomeView",
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  data() {
    return {
      value: "",
      isLoading: false,
      list: [],
      list_id: '',
      artile_list: [],
      loading: false,
      finished: false,
      nums:0
    };
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.$axios('/api/get_cate_list')
        .then(res => {
          console.log(res)
          if (res.code == 0) {
            this.list = res.data
          }
        })
    },
    // 获取列表ID
    getuid(title) {
      console.log(title)
      this.list_id = this.list[title]._id
      console.log(this.list_id)
      this.$axios.post('/api/get_article_list', {
        cate_id: this.list_id, skip: 0, limit: 20
      }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.artile_list = res.data
        }
        // console.log(this.artile_list)
      })
    },
    getNews() {
      let num1 = Math.floor(Math.random() * 20) + 10
      let num2 = Math.floor(Math.random() * 20) + 10

      this.$axios.post('/api/get_article_list', {
        cate_id: this.list_id, skip: num1, limit: num2
      }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.artile_list = res.data
        }
        this.loading = false;
        // console.log(this.artile_list)
      })
    },
    // 上拉加载
    onLoad() {
      console.log('1111')

      setTimeout(() => {
        let num1 = this.nums
        let num2 = Math.floor(Math.random() * 20) + 10

        this.$axios.post('/api/get_article_list', {
          cate_id: this.list_id, skip: num1, limit: num2
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              this.artile_list.push(res.data[i])
            }
            this.nums = this.nums+num2
          }
          this.loading = false;
          if (res.count.length == this.artile_list) {
            this.finished = true;
          }
          // console.log(this.artile_list.length)
          // console.log(res.count)
        })
      }, 1000);
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.getNews()
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.bom {
  margin-top: 17vw;
}

.van-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 17px 100px;
}

.spa {
  width: 100%;

  // background-color: cyan;
  .ka {
    display: block;
    width: 95%;
    // height: 300px;
    margin: auto;
    // background-color: antiquewhite;
    border-bottom: 1px solid rgb(201, 201, 201);

    p {
      width: 100%;
      height: 40px;
      font-size: 15px;
      font-weight: 500px;
      line-height: 40px;
      overflow: hidden;
      // padding-left: 15px;
    }

    .img {
      width: 100%;
      // height: 220px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .img01 {
        width: 90px;
        height: 90px;
        margin: 5px 10px;
      }

      .img02 {
        width: 33%;
        // height: 280px;
      }
    }

    .times {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      color: rgb(201, 201, 201);

      .name {
        margin: 0;
        width: 30%;
      }

      .pinglun {
        // margin-left: -30px;
        width: 30%;
        padding-left: 15px;
      }

      .time {
        // margin-left: -60px;
        width: 45%;
      }
    }
  }
}
</style>